<template>
	<view class="mvs">
		<scroll-view scrollY class="mvs-scroll" @scrolltolower="reachBottom">
			<view class="mvs-nav">
				<view class="mvs-nav-item" v-for="(item, index) in video" :key="index" @tap="plays(item.vid,item.type)">
					<view class="mvs-nav-item-img">
						<image :src="item.coverUrl" mode=""></image>
					</view>
					<view class="mvs-nav-item-msg">
						<u--text :text="item.title || item.name" lines="2"></u--text>
						<view class="mvs-nav-item-msg-info">
							<text style="margin-right: 15rpx;">{{item.durationms |formatStr2 }}</text>
							<text v-if="item.creator">
								{{item.creator[0]?item.creator[0].userName: item.creator.nickname}}
							</text>
							<text v-else-if="!item.creator">
								{{item.artists[0].name}}
							</text>
						</view>
					</view>

				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import moment from 'moment'
	export default {
		props: ['video'],
		methods: {
			reachBottom() {
				this.$parent.$parent.$parent.$parent._getmylist()
			},
			// 跳转到是视频播放页面
			plays(vid, type) {
				if (type == 1) {
					uni.navigateTo({
						url: "/view/VudioPlay/VudioPlay?id=" + vid
					})
				} else if (type == 0) {
					uni.navigateTo({
						url: "/view/Mv/Mv?id=" + vid
					})
				}

			},
		},
		created() {
			console.log(this.video);
		},
		filters: {
			count(v) {
				return v > 10000 ? (v / 10000).toFixed(1) + '万次' : v + '次'
			},
			formatStr2(v) {
				return moment(v).format('mm:ss')
			}
		},

	}
</script>

<style lang="scss">
	.mvs {
		// margin-top: 30rpx;

		&-scroll {
			height: calc(100vh - 84px);
		}

		&-nav {
			padding: 10rpx 30rpx;
			background-color: #fff;
			border-radius: 10px;
			// display: flex;
			// margin: 0 15px;

			&-title {
				border-top-left-radius: 10px;
				border-top-right-radius: 10px;
				background-color: #fff;
				padding: 30rpx 15rpx;
				font-weight: 600;
				font-size: 17px;
			}

			&-item {
				display: flex;
				align-items: center;
				background-color: #fff;

				&-img {
					position: relative;

					image {
						border: 1px solid rgb(245, 245, 245);
						width: 200upx;
						height: 140upx;
						border-radius: 10px;
					}
				}

				&-msg {
					margin-left: 10px;

					&-info {
						font-size: 15rpx;
						color: #6D6D6D;
					}
				}
			}

		}

	}
</style>
